<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
  <head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="动检通智慧云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>

    <title>牧中畜牧业大数据智慧云平台V1.0</title>


</head>
<body>
<!--顶部一级导航-->
<div id="header" th:replace="~{baseui/topheader :: topheader}"></div>

<!--动检通菜单-->
<div id="topnav" th:replace="djt/partial/topnav :: topnav(4)"></div>
<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="djt/partial/supervision_left :: nav(1)"/>

    <div class="container-fluid" id="pcont">
        <!--<div class="page-head">-->
        <!--<h3>信息总览</h3>-->
        <!--</div>-->
        <div class="cl-mcont">

            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div class="header"><h3>信息总览</h3></div>
                        <div class="content">
                            <div class="table-responsive">
                                <div id="datatable_wrapper"
                                     class="dataTables_wrapper form-inline dt-bootstrap no-footer">

                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="dataTables_length" id="datatable_length">
                                                <label>Show <select name="datatable_length" aria-controls="datatable"
                                                                    class="form-control input-sm">
                                                    <option value="10">10</option>
                                                    <option value="25">25</option>
                                                    <option value="50">50</option>
                                                    <option value="100">100</option>
                                                </select>

                                                </label>
                                            </div>
                                        </div>

                                        <div class="col-sm-6">
                                            <div id="datatable_filter" class="dataTables_filter">
                                                <label>Search:<input type="search" class="form-control input-sm"
                                                                     placeholder="Search"
                                                                     aria-controls="datatable"></label></div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-sm-12">

                                            <!-- Table -->
                                            <table id="jqGrid"></table>
                                            <div id="jqGridPager"></div>

                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

	</div>

<script type="text/javascript" src="/webjars/js/jquery.js"></script>
<script type="text/javascript" src="/webjars/js/jquery.gritter/js/jquery.gritter.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="/webjars/js/jquery.select2/select2.min.js" type="text/javascript"></script>
<script src="/webjars/js/skycons/skycons.js" type="text/javascript"></script>
<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script type="text/ecmascript" src="/webjars/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script type="text/ecmascript" src="/webjars/jqgrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        App.init();

        //grid
        $("#jqGrid").jqGrid({
            url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
            mtype: "GET",
            styleUI: 'Bootstrap',
            datatype: "jsonp",
            autowidth: true,
            colModel: [
                {label: 'OrderID', name: 'OrderID', key: true, width: 75},
                {label: 'Customer ID', name: 'CustomerID', width: 150},
                {label: 'Order Date', name: 'OrderDate', width: 150},
                {label: 'Freight', name: 'Freight', width: 150},
                {label: 'Ship Name', name: 'ShipName', width: 150}
            ],
            viewrecords: true,
            height: 350,
            rowNum: 20,
            pager: "#jqGridPager"
        });

    });
</script>
  </body>
</html>
